<template>
	<view class="mine-back" style="background-color: #fff; overflow-x: hidden;">
		<top-heigth :backTitle="backTitle"></top-heigth>
		
		<view class="content-box" v-if="detail">
			<view class="top-head-box">
				<view class="head-box">
					<view class="head">
						<uv-upload
							:fileList="[]"
							:multiple="false"
							width="230rpx"
							height="200rpx"
							@afterRead="afterCoverRead"
							v-if="!isShenhe"
						>
							<uv-avatar :src="detail.staffCover ? detail.staffCover : '/static/image/mine-head.png'" size="185rpx" mode="widthFix"></uv-avatar>
						</uv-upload>
						<uv-avatar v-else :src="detail.staffCover ? detail.staffCover : '/static/image/mine-head.png'" size="185rpx" mode="widthFix"></uv-avatar>
						
					</view>
				</view>
			</view>
			
			<view class="mine-font">
				<view>
					<view class="list">
						<view class="list-l">学历</view>
						<view class="list-r" >
							<view class="list-r-font"  @click="openPicker()">
								<view v-if="!detail.school" class="font-hui" style="">请选择学历</view>
								<view v-if="detail.school">{{detail.school}}</view>
								<uv-picker ref="picker" :columns="xueliList" @confirm="confirm"></uv-picker>
							</view>
							<image class="go" src="/static/image/more.png"></image>
						</view>
					</view>
					<view class="list">
						<view class="list-l">性别</view>
						<view class="list-r" >
							<view class="list-r-font"  @click="openSexPicker()">
								<view>{{detail.staffSex == 1 ? '男' : '女'}}</view>
								<uv-picker ref="pickerSex" :columns="sexList" @confirm="confirmSex"></uv-picker>
							</view>
							<image class="go" src="/static/image/more.png"></image>
						</view>
					</view>
					<view class="list">
						<view class="list-l">民族</view>
						<view class="list-r">
							<uv-input placeholder="请输入民族" inputAlign="right"  border="none" v-model="detail.nation"></uv-input>
						</view>
					</view>
					<view class="list">
						<view class="list-l">身高</view>
						<view class="list-r">
							<uv-input placeholder="请输入身高" inputAlign="right"  border="none" v-model="detail.height"></uv-input>
							<view>CM</view>
						</view>
					</view>
					<view class="list">
						<view class="list-l">体重</view>
						<view class="list-r">
							<uv-input placeholder="请输入体重" inputAlign="right"  border="none" v-model="detail.weight"></uv-input>
							<view>KG</view>
						</view>
					</view>
					<view class="list">
						<view class="list-l">属相</view>
						<view class="list-r">
							<uv-input placeholder="请输入属相" inputAlign="right"  border="none" v-model="detail.shuxiang"></uv-input>
						</view>
					</view>
					<view class="list">
						<view class="list-l">星座</view>
						<view class="list-r">
							<uv-input placeholder="请输入星座" inputAlign="right"  border="none" v-model="detail.xingzuo"></uv-input>
						</view>
					</view>
					<view class="list2">
						<view class="list-l">简介描述</view>
						<uv-textarea v-model="detail.staffDesc" border="none" style="background: #F8F8F8;"  placeholder="请输入内容"></uv-textarea>
					</view> 
					<view class="list2" v-if="!isShenhe">
						<view class="list-l">上传视频</view>
						<uv-upload
								:fileList="liveVideos"
								:maxCount="1"
								@afterRead="afterReadVideo"
								@delete="deleteVideo"
								:previewFullImage="true"
								accept="video"
							></uv-upload>
					</view>
					<view class="list2" v-if="!isShenhe">
						<view class="list-l">上传图片（生活照）</view>
						<uv-upload
								:fileList="fileListLive"
								name="Live"
								multiple
								:maxCount="4"
								@afterRead="afterRead"
								@delete="deletePic"
								:previewFullImage="true"
								accept="image"
							></uv-upload>
					</view>
					
				</view>
				<view @click="unDate()" class="login-but">确认提交</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import config from '@/common/config'
	export default {
		data() {
			return {
				backTitle: "个人中心",
				userInfo: uni.getStorageSync('userInfo'),
				name:'',
				detail: null,
				liveVideos: [],
				fileListLive: [],
				xueliList: [
					['初中', '高中', '专科', '本科', '硕士', '博士']
				],
				sexList: [
					['男', '女']
				],
				isShenhe: 1
				
			}
		},
		components: { TopHeigth },
		onLoad() {
			uni.$u.http.post('/api/shop/v1_0/linyue/version',{}).then((res) => {
				this.isShenhe = !res.data
			})
			this.getDetail()// 技师详情
			let system = uni.getSystemInfoSync(); // 获取系统信息
			if (system.platform === 'android') {
				let MainActivity = plus.android.runtimeMainActivity();
				let PermissionCheck = MainActivity.checkSelfPermission('android.permission.CAMERA')
				if(PermissionCheck != 0){
					uni.showModal({
							title: '提示',
							content: '为了实现图片上传、拍摄视频功能功能，需要访问您的摄像头权限，以及允许相机获取位置信息权限，您如果拒绝将无法使用该功能',
							// showCancel: false, // 不显示取消按钮
							success(res) {
								if (res.confirm) {
									
								}
							}
						});
					}else{
						
					}
			}

		},
		mounted() {

		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},
			openSexPicker() {
				this.$refs.pickerSex.open();
			},
			confirm(e) {
				this.detail.school = e.value[0]
			},
			confirmSex(e) {
				this.detail.staffSex = e.value[0] == '女' ? 0 : 1
			},
			getDetail(){ // 技师详情
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.userInfo.id,
				}).then((res) => {
					this.detail = res.data
					if(this.detail.staffVideo){
						this.liveVideos = JSON.parse(this.detail.staffVideo)
					}
					if(this.detail.staffBanner){
						this.fileListLive = JSON.parse(this.detail.staffBanner)
					}
				})
			},
			unDate(){ // 上传接口
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/updateTAppStaff', {
					id: this.detail.id,
					version: this.detail.version,
					staffCover: this.detail.staffCover,
					school: this.detail.school,
					nation: this.detail.nation,
					staffSex: this.detail.staffSex,
					height: this.detail.height,
					weight: this.detail.weight,
					shuxiang: this.detail.shuxiang,
					xingzuo: this.detail.xingzuo,
					staffDesc: this.detail.staffDesc,
					staffVideo: JSON.stringify(this.liveVideos),
					staffBanner: JSON.stringify(this.fileListLive),
				}).then((res) => {
					if(res.code == 200){
						uni.showToast({
							icon: "none",
							title: res.message
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			// 新增图片
			async afterCoverRead(event) {
				const result = await this.uploadCoverPromise(event.file.url)
			},
			uploadCoverPromise(url){
				var _this = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.$u.http.getSignUrl("/api/system/loginController/uploadImage"), // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log("uploadRes", res)
							_this.detail.staffCover = JSON.parse(res.data).data
						}
					});
				})
			},
			
			// 上传视频
			async afterReadVideo(event){
				this.liveVideos = [{
					url: event.file.url,
					status: 'uploading',
					message: '上传中'
				}]
				const result = await this.uploadVideoPromise(event.file.url)
			},
			uploadVideoPromise(url){
				var _this = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.$u.http.getSignUrl("/api/system/loginController/uploadImage"), // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log("uploadRes", res)
							_this.detail.staffVideo = JSON.parse(res.data).data
							_this.liveVideos = [{
								url: _this.detail.staffVideo
							}]
						}
					});
				})
			},
			deleteVideo(event){
				this.liveVideos = []
			},
			// 上传banner图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, {
						url: result
					})
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.$u.http.getSignUrl("/api/system/loginController/uploadImage"), // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							resolve(JSON.parse(res.data).data)
						}
					});
				})
			},
			deletePic(event){
				this[`fileList${event.name}`].splice(event.index, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	.top-head-box{
		@include flex;
		align-items: center;
		justify-content:center;
		height: 200rpx;
		margin-top: 100rpx
		
	}
	.head-box{
		@include flex;
		align-items: center;
		justify-content:center;
		width: 50%;
	}
	.head-box .head{
		@include flex;
		align-items: center;
		justify-content:center;
		width:185rpx;
		height: 185rpx;
		border-radius: 185rpx;
		overflow: hidden;
		text-align: center;
		font-size: 32rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.2);
		background: #fff;
	}
	.head{
		border: 4rpx solid #fff;
	}
	.head image{
		
		width:185rpx;
		height: 185rpx;
	}
	
	
	.mine-back{
		background: url("/static/image/back2.png") no-repeat;
		background-size: 100% auto;
		
	}
	
	.mine-font{
		background: #fff;
		border-radius: 16rpx;
		/* box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.1); */
		font-size: 28rpx;
		color: #02091A;
		margin-top: 24rpx;
		.list{
			@include flex;
			align-items: center;
			justify-content:space-between;
			padding:28rpx 0;
			border-bottom: 2rpx solid #eee;
			.go{
				width: 32rpx;
				height: 32rpx;
			}
			.list-l{
				@include flex;
				align-items: center;
				justify-content:flex-start;
			}
			.list-r{
				@include flex;
				align-items: center;
				justify-content:flex-end;
				.list-r-font{
					margin-right: 16rpx;
				}
			}
		}
		.list2{
			.list-l{
				padding: 30rpx 0;
			}
		}
		.list:last-child{
			border-bottom:none;
		}
	}
	.nc{
		@include flex;
		align-items: center;
		justify-content:flex-start;
	}
</style>
